<template>
  <div class="count">
    <!-- 组件中使用state数据1 直接去实例上的$store中取值 -->
    <h2>Count组件:{{ $store.state.count }}</h2>
    <h2>Count组件:{{ count1 }}</h2>
    <h2>Count组件:{{ num }}</h2>
    <!-- 读取getters的方式1: 插值语法直接获取 -->
    <p>总价格是:{{ $store.getters.totalPrice }}</p>
    <p>总价格是:{{ totalPrice }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "Count",
  data() {
    return {};
  },
  mounted() {
    console.log(this.$store, "this.$store");
    /* 
    mapGetters辅助函数帮我们快速的去vuex中读取getters的值
    写法和mapState一致,key传递一个数组或对象作为参数 
    */
    const result = mapGetters(["totalPrice"]);
    console.log(result, "result");
    console.log(result.totalPrice.call(this));
  },
  computed: {
    ...mapState({ count1: "count", num: "num" }),
    /* 读取getters的方式2: 计算属性去获取 */
    // totalPrice() {
    //   return this.$store.getters.totalPrice;
    // },

    //读取getters的方法3:使用mapGetters生成计算属性读取
    ...mapGetters(["totalPrice"]),
  },
};
</script>

<style scoped>
.count {
  background: pink;
}
</style>